<template>
  <h2>子级组件</h2>
  <h3>{{msg2}}</h3>
  <button @click="msg2+='==='">更改数据</button>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from "vue";

export default defineComponent({
  name: "Child",
  beforeCreate() {
    console.log('2.x===beforeCreate===执行了')
  },
  created() {
    console.log('2.x===create===执行力')
  },
  beforeMount() {
    console.log('2.x===beforeMount===执行了')
  },
  mounted() {
    console.log('2.x===mounted===执行了')
  },
  beforeUpdate() {
    console.log('2.x===beforeUpdate===执行了')
  },
  updated() {
    console.log('2.x===updated===执行了')
  },
  beforeUnmount() {
    console.log('2.x===beforeUnmount===执行了')
  },
  unmounted() {
    console.log('2.x===unmounted===执行了')
  },

  setup(){
    console.log('3.x的setup')
    const msg2 = ref('xxx')
    // setup函数相当于beforeCreate和created这俩个生命周期
    onBeforeMount(() =>{
      console.log('3.x===onBeforeMount===执行了')
    })
    onMounted(() => {
      console.log('3.x===onMounted===执行了')
    })
    onBeforeUpdate(() => {
      console.log('3.x===onBeforeUpdate===执行了')
    })
    onUpdated(() => {
      console.log('3.x===onUpdated===执行了')
    })
    onBeforeUnmount(() =>{
      console.log('3.x===onBeforeUnmount===执行了')
    })
    onUnmounted(() => {
      console.log('3.x===onUnmounted===执行了')
    })
    return {
      msg2
    }
  }

})
</script>

<style scoped>

</style>
